<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" autocomplete="off">
        <a-form-item label="用户名" :rules="rules.username" name="username">
            <a-input v-model:value="form.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="姓名" :rules="rules.realname" name="realname">
            <a-input v-model:value="form.realname" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="手机号" :rules="rules.phone" name="phone">
            <a-input v-model:value="form.phone" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item label="密码" :rules="rules.password" name="password">
            <a-input-password v-model:value="form.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item label="重复密码" :rules="rules.repassword" name="repassword">
            <a-input-password v-model:value="form.repassword" placeholder="请再次输入密码" />
        </a-form-item>
        <a-form-item label="工号" :rules="rules.workNo" name="workNo">
            <a-input v-model:value="form.workNo" placeholder="请输入工号" />
        </a-form-item>
        <a-form-item label="头像" :rules="rules.avatar" name="avatar">
            <upload-image v-model:value="form.avatar" />
        </a-form-item>
        <a-form-item label="出生日期" :rules="rules.birthday" name="birthday">
            <date-picker v-model:value="form.birthday" placeholder="请选择出生日期" />
        </a-form-item>
        <a-form-item label="邮箱" :rules="rules.email" name="email">
            <a-input v-model:value="form.email" placeholder="请输入邮箱" />
        </a-form-item>
        <a-form-item label="职位" :rules="rules.sysJobId" name="sysJobId">
            <a-select v-model:value="form.sysJobId" placeholder="请选择职位" :options="list.jobs" :field-names="{ label: 'name', value: 'id' }" />
        </a-form-item>
        <a-form-item label="角色" :rules="rules.sysRoleId" name="sysRoleId">
            <a-select v-model:value="form.sysRoleId" placeholder="请选择角色" :options="list.roles" :field-names="{ label: 'name', value: 'id' }" />
        </a-form-item>
        <a-form-item label="部门" :rules="rules.sysDepartId" name="sysDepartId">
            <tree-select v-model:value="form.sysDepartId" :tree-data="list.departs" placeholder="请选择部门" />
        </a-form-item>
        <a-form-item label="性别" :rules="rules.sex" name="sex">
            <dict-radio v-model:value="form.sex" dict-code="sex" />
        </a-form-item>
        <a-form-item label="状态" :rules="rules.status" name="status">
            <Switch v-model:checked="form.status" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { jobList } from '/@/api/System/Job'
import { listRole } from '/@/api/System/Role'
import { list as listDepart } from '/@/api/System/Depart'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import TreeUtils from '@iframe/tools/utils/TreeUtils'
import { DictRadio, Switch, TreeSelect, UploadImage, DatePicker } from '@iframe/tools/components'
import { TelphoneRegular, PasswordRegular, EmailRegular } from '@iframe/tools/utils/regular'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({
    status: 0
})
const list = reactive({
    jobs: [],
    roles: [],
    departs: []
})
const repasswordChecked = (rule, value) => {
    if (value === form.password) {
        return Promise.resolve()
    }
    return Promise.reject('两次密码不一致')
}
const rules = reactive({
    username: { required: true, message: '请输入用户名' },
    realname: { required: true, message: '请输入姓名' },
    phone: [
        { required: true, message: '请输入手机号' },
        { pattern: TelphoneRegular, message: '请正确输入手机号' }
    ],
    password: [
        { required: true, message: '请输入密码' },
        { pattern: PasswordRegular, message: '密码必须以字母开头，包括数字的8-20位字符串' }
    ],
    repassword: [{ required: true, message: '请输入重复密码' }, { validator: repasswordChecked }],
    workNo: { required: true, message: '请输入工号' },
    avatar: { required: true, message: '请上传头像' },
    email: { pattern: EmailRegular, message: '邮箱格式不正确' },
    sysJobId: { required: true, message: '请选择职位' },
    sysRoleId: { required: true, message: '请选择角色' },
    sysDepartId: { required: true, message: '请选择部门' },
    sex: { required: true, message: '请选择性别' }
})

const init = () => {
    getJobs()
    getRoles()
    getDeparts()
}
const getJobs = () => {
    jobList().then(result => {
        if (result.code === SUCCESS_CODE) {
            list.jobs = result.data
        }
    })
}
const getRoles = () => {
    listRole().then(result => {
        if (result.code === SUCCESS_CODE) {
            list.roles = result.data
        }
    })
}
const getDeparts = () => {
    listDepart().then(result => {
        if (result.code === SUCCESS_CODE) {
            list.departs = TreeUtils.generateTreeData(result.data)
        }
    })
}
init()
defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
